<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@include file="../base_path.jsp" %>

<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="description" content="">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/lib/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/lib/jqgrid/5.2.1/css/ui.jqgrid-bootstrap.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/lib/lobibox/css/lobibox.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/css/mycss.css"/>
    <title>机器人监控</title>
	<style>
		.bg-status {
			position: relative;
			height: 100%;
			padding-top: 20px;
			padding-left: 20px;
		}

		.bg-status img{
			position: absolute;
			top: 50%;
			right: 10%;
			height: 32px;
			margin-top:-16px;
		}

		.bg-info{
			background-color: transparent;
			background-image: url(<%=basePath%>/images/image/status1.png);
			background-size: 100% 100%;
		}

		.bg-success {
			background-color: transparent;
			background-image: url(<%=basePath%>/images/image/status2.png);
			background-size: 100% 100%;
		}

		.bg-primary {
			background-color: transparent;
			background-image: url(<%=basePath%>/images/image/status3.png);
			background-size: 100% 100%;
		}

		.bg-danger {
			background-color: transparent;
			background-image: url(<%=basePath%>/images/image/status4.png);
			background-size: 100% 100%;
		}

		.p-tit {
			font-size: 13px;
			color: #FFF;
			margin-bottom: 0px;
		}

		.p-num {
			font-size: 23px;
			color: #FFF;
		}
	</style>
</head>
<body>
<div class="navbar-fixed-top">
    <div class="breadcrumb">
        <span>系统监控</span>/
        <span class="active">机器人监控</span>
        <span class="pull-right" title="刷新">
           <div class="btn-refresh" onclick="location.replace(location.href);">
           	<img src="<%=basePath%>/images/refresh.png" >
           </div>
        </span>

    </div>
</div>

<div class="container-fluid">
	<div class="container-fluid-main">
    <div class="page-header">
        <h3>机器人状态监控</h3>
    </div>
    <div class="panel panel-default" style="border: none;">
        <!-- <div class="panel-heading">
            <h3 class="panel-title">状态概览</h3>
        </div> -->
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-8" style="font-size: 30px;">
                    <div class="col-xs-3" style="height: 110px;padding: 10px;">
						<div class="bg-info bg-status">
							<p class="p-tit">总数</p><p class="p-num">${robotsInfo.total_cnt}</p>
							<img src="<%=basePath%>/images/image/status1f.png" >
						</div>

					</div>
                    <div class="col-xs-3" style="height: 110px;padding: 10px;">
						<div class="bg-success bg-status">
							<p class="p-tit">空闲</p><p class="p-num">${robotsInfo.idle_cnt}</p>
							<img src="<%=basePath%>/images/image/status2f.png" >
						</div>
					</div>
                    <div class="col-xs-3 " style="height: 110px;padding: 10px;">
						<div class="bg-primary bg-status">
							<p class="p-tit">工作中</p><p class="p-num">${robotsInfo.ing_cnt}</p>
							<img src="<%=basePath%>/images/image/status3f.png" >
						</div>
					</div>
                    <div class="col-xs-3" style="height: 110px;padding: 10px;">
						<div class="bg-danger bg-status">
							<p class="p-tit">异常</p><p class="p-num">${robotsInfo.dead_cnt}</p>
							<img src="<%=basePath%>/images/image/status4f.png" >
						</div>
					</div>
                </div>
                <div class="col-xs-3">
                    <div id="myChart" style="height:200px ;width: 100%;"></div>
                </div>
            </div>

        </div>
    </div>
    <table id="RobotInfoJQGrid"></table>
    <div style="height: 40px" id="RobotInfoJQGridPager"></div>

    <div id="tooltip_content" style="margin:20px 0;"></div>
	</div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="<%=basePath%>/lib/jquery/1.11.0/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootbox/bootbox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/jquery.jqGrid.min.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->

<script type="text/javascript" src="<%=basePath%>/lib/echarts/3.7.1/echarts.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('myChart'));
    $(function () {
        $.jgrid.defaults.responsive = true;
        $.jgrid.defaults.styleUI = "Bootstrap";
        $("#RobotInfoJQGrid").jqGrid({
            height: "100%",
            autowidth:true,
            shrinkToFit:true,/*  autoScroll: false, *//*forceFit: true, */
            colNames:["机器人", "状态"],
            colModel:[
                {name: "id", index: "id", autowidth: true, key: true, align: "left"},
//                {name: "call_id", index: "call_id", hidden: true},
//                {name: "task_id", index: "task_id", hidden: true},
//                {name: "business_id", index: "business_id", hidden: true},
//                {name: "phone_number", index: "phone_number", hidden: true},
//                {name: "uid", index: "uid", autowidth: true, align: "left"},
//                {name: "ip", index: "ip", autowidth: true, align: "left"},
//                {name: "create_time", index: "create_time", autowidth: true, align: "left"},
//                {name: "last_time", index: "last_time", autowidth: true, align:"left"},
                {name: "status", index: "status", autowidth: true, align:"left"}
            ],
            pager:"#RobotInfoJQGridPager",
            viewrecords:true,
            hidegrid:false,
            multiselect: false,
            <%--url:"<%=basePath %>/search/fetchCallInfoJQGridDataForSearch.do",--%>
            datatype:'local',
            rownumbers: false,
            pgbuttons: false,
            rowNum : ${robotsInfo.robots.size()},
//            rowList : [10, 15, 30],
            jsonReader: {
                root: "root", page: "page", total: "total",          //   很重要 定义了 后台分页参数的名字。
                records: "records", repeatitems: false, id : "id"
            },
            gridComplete: function () {         // 数据加载完成后 添加 采购按钮
            },
            ondblClickRow: function (id) {
            },
            beforeSelectRow: function (rowid, e) {
            }
        });
        var rows = [];
        var item = {};
        var count = 0;
        <c:forEach items="${robotsInfo.robots}" var="item">
            item = {};
            item.id = "${item.id}";
            <%--item.uid = "${item.uid}";--%>
            <%--item.ip = "${item.ip}";--%>
            <%--item.create_time = "${item.create_time}";--%>
            <%--item.last_time = "${item.last_time}";--%>
            if (${item.status == 0}) {
                item.status = "<span class='label label-success'>空闲</span>";
            } else if (${item.status == 1}) {
                item.status = "<span class='label label-info'>工作中</span>";
            } else if (${item.status == 3}) {
                item.status = "<span class='label label-danger'>异常</span>";
            }

            <%--<c:choose>--%>
                <%--<c:when test="${item.task != null}">--%>
                    <%--item.call_id = "${item.task.web_call_id}";--%>
                    <%--item.task_id = "${item.task.web_task_id}";--%>
                    <%--item.business_id = "${item.task.web_business_id}";--%>
                    <%--item.phone_number = "${item.task.phone}";--%>
                <%--</c:when>--%>
                <%--<c:otherwise></c:otherwise>--%>
            <%--</c:choose>--%>
        $("#RobotInfoJQGrid").jqGrid('addRowData', item.id, item);
        </c:forEach>


//        var oDataTable = $('#tableRobotsInfo');
//        oDataTable.dataTable({
//            "bStateSave": false,//状态保存
//            "pading": false,
//            "aoColumnDefs": [
//                {"orderable": false, "aTargets": [2, 3, 4, 5]}// 参与排序的列
//            ]
//        });
        <%--$("#RobotInfoJQGrid").find("tbody").children("tr[role=row]").tooltip({--%>
            <%--position: 'top',--%>
            <%--content: $('#tooltip_content'),--%>
            <%--onShow: function(){--%>
                <%--$(this).tooltip('arrow').css('left', 50);--%>
                <%--$(this).tooltip('tip').css('left', $(this).offset().left);--%>
            <%--},--%>
            <%--onUpdate: function(cc){--%>
                <%--var rowId = $(this).attr("id").trim();--%>
                <%--var rowData = $("#RobotInfoJQGrid").jqGrid("getRowData", rowId);--%>
                <%--if (rowData.call_id == "") {--%>
                    <%--return;--%>
                <%--}--%>
                <%--cc.panel({--%>
                    <%--width: '300',--%>
                    <%--height: 'auto',--%>
                    <%--border: false,--%>
                    <%--href: '<%=basePath%>/monitor/showRobotTaskInfo.do?callId=' + rowData.call_id--%>
                <%--});--%>
            <%--}--%>
        <%--});--%>
        var option = {
            title : {
                text: '机器人状态',
                subtext: '总数： ${robotsInfo.total_cnt}',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: function () {
                    // ['空闲','工作中','异常']
                    var info = [];
                    if (${robotsInfo.idle_cnt != 0}) {
                        info.push('空闲');
                    }
                    if (${robotsInfo.ing_cnt != 0}) {
                        info.push('工作中');
                    }
                    if (${robotsInfo.dead_cnt != 0}) {
                        info.push('异常');
                    }
                    return info;
                }()
            },
            series : [
                {
                    name: '占比',
                    type: 'pie',
                    radius: ['30%', '70%'],
                    center: ['50%', '60%'],
                    data: function () {
                        var info = [];
                        if (${robotsInfo.idle_cnt != 0}) {
                            info.push({value: ${robotsInfo.idle_cnt}, name: '空闲'});
                        }
                        if (${robotsInfo.ing_cnt != 0}) {
                            info.push({value: ${robotsInfo.ing_cnt}, name: '工作中'});
                        }
                        if (${robotsInfo.dead_cnt != 0}) {
                            info.push({value: ${robotsInfo.dead_cnt}, name: '异常'});
                        }
                        return info;
                    }(),
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    color:function () {
                        // ['#0ee219', '#148FFF', 'red']
                        var info = [];
                        if (${robotsInfo.idle_cnt != 0}) {
                            info.push('#6098fe');
                        }
                        if (${robotsInfo.ing_cnt != 0}) {
                            info.push('#1ac9ae');
                        }
                        if (${robotsInfo.dead_cnt != 0}) {
                            info.push('#f86f6f');
                        }
                        return info;
                    }()
                }
            ]
        };
        myChart.setOption(option)

    });


</script>
</body>
</html>